<template>
  <div class="myFooter" v-show="total">
    <input type="checkbox" v-model="isAll" />
    已完成<span>{{ doneTodo }} </span> /全部<span>{{ total }}</span>
    <button @click="clearAll">清楚任务清单</button>
  </div>
</template>
<script>
export default {
  name: "myFooter",
  props: ["todos"],
  computed: {
    doneTodo() {
      return this.todos.reduce((pre, todos) => pre + (todos.done ? 1 : 0), 0);
    },
    total() {
      return this.todos.length;
    },
    isAll: {
      get() {
        return this.doneTodo == this.total && this.total > 0;
      },
      set(value) {
        this.$emit('checkAllTodo',value);
      },
    },
  },
  methods: {
    clearAll() {
      this.$emit('clearAllTodo');
    },
  },
};
</script>
<style lang="less" scoped>
.myFooter {
  text-align: left;
  button {
    float: right;
    margin: -2px 2px 0 0;
    color: white;
    background: orangered;
    border: none;
    border-radius: 4px;
    width: 138px;
    height: 26px;
    cursor: pointer;
  }
}
</style>